<!DOCTYPE html>
<html lang="zh-cn" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>Hugo&#43;Github 搭建个人网站 | DnF&#39;s Zone</title>
<meta name="keywords" content="web, blog, hugo, github, markdown" />
<meta name="description" content="简介
这是我的第一篇博客，这篇文章主要讲述了我搭建个人网站，以及如何自动构建发布静态页面的过程。">
<meta name="author" content="DnF">
<link rel="canonical" href="http://zone.desiyonan.tech/2021/05/8df2adb7809b41c597eb2efb10ed66db/" />
<link crossorigin="anonymous" href="/assets/css/stylesheet.min.2d6dbfc6e0f8a1db1c9d082a76dc11d094328cf63f247bbc2421dfaa7f2bb170.css" integrity="sha256-LW2/xuD4odscnQgqdtwR0JQyjPY/JHu8JCHfqn8rsXA=" rel="preload stylesheet" as="style">
<link rel="preload" href="https://raw.desiyonan.tech/img/2021/06/Photo.jfif" as="image">
<script defer crossorigin="anonymous" src="/assets/js/highlight.min.7680afc38aa6b15ddf158a4f3780b7b1f7dde7e91d26f073e6229bb7a0793c92.js" integrity="sha256-doCvw4qmsV3fFYpPN4C3sffd5&#43;kdJvBz5iKbt6B5PJI="
    onload="hljs.initHighlightingOnLoad();"></script>
<link rel="icon" href="http://zone.desiyonan.tech/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="http://zone.desiyonan.tech/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://zone.desiyonan.tech/favicon-32x32.png">
<link rel="apple-touch-icon" href="http://zone.desiyonan.tech/apple-touch-icon.png">
<link rel="mask-icon" href="http://zone.desiyonan.tech/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<meta name="generator" content="Hugo 0.83.1" />
<meta property="og:title" content="Hugo&#43;Github 搭建个人网站" />
<meta property="og:description" content="简介
这是我的第一篇博客，这篇文章主要讲述了我搭建个人网站，以及如何自动构建发布静态页面的过程。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://zone.desiyonan.tech/2021/05/8df2adb7809b41c597eb2efb10ed66db/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2021-05-31T20:25:48&#43;08:00" />
<meta property="article:modified_time" content="2021-05-31T20:25:48&#43;08:00" />


<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Hugo&#43;Github 搭建个人网站"/>
<meta name="twitter:description" content="简介
这是我的第一篇博客，这篇文章主要讲述了我搭建个人网站，以及如何自动构建发布静态页面的过程。"/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "Posts",
      "item": "http://zone.desiyonan.tech/post/"
    }, 
    {
      "@type": "ListItem",
      "position":  3 ,
      "name": "Hugo+Github 搭建个人网站",
      "item": "http://zone.desiyonan.tech/2021/05/8df2adb7809b41c597eb2efb10ed66db/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Hugo+Github 搭建个人网站",
  "name": "Hugo\u002bGithub 搭建个人网站",
  "description": "简介 这是我的第一篇博客，这篇文章主要讲述了我搭建个人网站，以及如何自动构建发布静态页面的过程。\n",
  "keywords": [
    "web", "blog", "hugo", "github", "markdown"
  ],
  "articleBody": "简介 这是我的第一篇博客，这篇文章主要讲述了我搭建个人网站，以及如何自动构建发布静态页面的过程。\n前言 最近正好整理记录的笔记，之前写的比较随意，不太好整理，而且之前早就想搭建自己的个人博客网站，正好这次刚好又时间折腾折腾。 搭建静态网站的框架网上比较多，文档和教程大部分也比较全，这次就直接选择口碑比较好也容易的 Hugo 在 Github 下搭建一个。\n安装 Hugo 在 Win10 下使用命令安装：\nscoop install hugo 验证安装:\nhugo version 这里的Scoop是 Win10 平台下的软件包管理工具之一，非常方便，感兴趣可在 GitHub或CodeChina 上查看。\n更多的安装方式和文档可以参看Hugo 官方安装教程.\n新建站点 新建站点项目\nhugo new site tech-blog Congratulations! Your new Hugo site is created in D:\\tech-blog. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the \"hugo new theme \" command. 2. Perhaps you want to add some content. You can add single files with \"hugo new \\.\". 3. Start the built-in live server via \"hugo server\". Visit https://gohugo.io/ for quickstart guide and full documentation. 配置一款主题\nHugo主题提供了大量模板，这里用的主题是 PaperMod，详细文档(安装、配置)可以在Github上查看。\n更多的主题可以在 Hugo 主题 上查看\ncd tech-blog git init git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1 git submodule update --init --recursive 修改配置文件 config.toml 或者 config.yaml，.toml格式配置可参考官方文档，.\\config.yaml基本内容如下\nbaseurl: \"http://zone.desiyonan.tech\" title: \"DnF's Zone\" defaultContentLanguage: zh hasCJKLanguage: true theme: PaperMod # 主题 params: AuthorName: \"DnF\" GitHubUser: \"desiyonan\" 启动本地服务器\nhugo server -D Start building sites … | EN -------------------+----- Pages | 12 Paginator pages | 0 Non-page files | 0 Static files | 1 Processed images | 0 Aliases | 2 Sitemaps | 1 Cleaned | 0 Built in 35 ms Watching for changes in D:\\tech-blog\\{archetypes，content，data，layouts，static，themes} Watching for config changes in D:\\tech-blog\\config.yaml Environment: \"development\" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop 现在可以直接访问 http://localhost:1313/ 查看站点，不过要看文章具体效果可以先新建测试文章\nhugo new post/test.md '## Test' | out-file -a -e utf8 .\\content\\post\\test.md 访问 http://localhost:1313/post/test 就可以看到测试效果\n最后基本仓库的初始化\ngit commit -am \"init\" git push -u origin master 配置 Github Pages 基本框架已经搭建完成，需要能够在公网直接访问网页还需要配置 Github Pages。\n看了网上不少的博客，大部分都是在本地编辑 .md 文档，完成后通过 hugo 命令构建输出，最后再把输出的 public 目录推送到 Github 上。\n再尝试了一两次后太繁琐了，而且也不是我想要的效果，最后在知乎上看到最理想的效果：在本地编辑 .md 文档后推送到直接仓库后就可以通过公网看到效果。详细可以看知乎上的文章，说明的很清楚，重复的字也懒得码了，这里简单说明下大致流程和需要注意的地方。\n流程的大致原理:\n简单的说就是：\n 建两个仓库: 一个放文档源码，一个放构建后的页面代码 给源码仓库添加 Action，当推送 master 代码时自动构建页面，再推送到页面仓库  需要注意：\n 放构建后的静态页面的仓库需要配置 Github Pages 两个仓库需要一对 SSH 密钥，源码仓库配置私钥，页面仓库配置公钥 Github Action配置需要根据实际情况改动下  以下是我的改动后 Action 配置内容\nname: Deploy Hugo Site to Github Pages on Master Branch on: push: branches: - master jobs: build-deploy: runs-on: ubuntu-18.04 steps: - uses: actions/checkout@v1  # v2 does not have submodules option now with: submodules: true - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: '0.83.1' extended: true - name: Build run: hugo --minify - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} # 这里的 ACTIONS_DEPLOY_KEY 则是上面设置 Private Key的变量名 external_repository: desiyonan/zone # Pages 远程仓库 publish_dir: \"public\" keep_files: false # remove existing files publish_branch: master  # deploying branch commit_message: ${{ github.event.head_commit.message }} 不同的点：\nwith: submodules: true 因为之前配置主题时是到了 git submodule，所以这里必要有，不然构建后没有主题。\n其次\nexternal_repository: desiyonan/zone # Pages 远程仓库 publish_dir: \"public\" external_repository 是放页面仓库，publish_dir 是构建后需要推送的目录，hugo 默认的构建目录就是 public，具体配置看下 config.toml 或者 config.yaml 下有没有\npublishdir: xxxx 不复杂，摸索个把小时就行了。两个仓库的关联配置到此位置，还需要最后一步配置页面仓库的Github Pages\n打开对应 Github 仓库页面，找到 Setting 页签，然后可以在侧边栏看到 Pages 设置\n需要配置的主要是 Source 选择分支和目录，自定义域名可以通过 Custom domain 配置，域名配置不是必须，如果配置了还需要新增 static/CNAME 文件，文件内容就是自定义的域名，中途改了几次域名就是没改文件导致访问不了网站。\nPScat static\\CNAME zone.desiyonan.tech 至此，耗时两天，一个完整的自动化部署个人博客终于搭建完了，网站的美化后面再一步步来。\n相关链接  Hugo homepage Hugo Install Hugo Docs Hugo Themes Theme PaperMod PaperMod - Github Hugo Config Scoop Github Scoop Codechina Hugo Gitee - Blog 使用Hugo搭建博客 - Blog Hugo Deploy Action  ",
  "wordCount" : "1606",
  "inLanguage": "zh-cn",
  "datePublished": "2021-05-31T20:25:48+08:00",
  "dateModified": "2021-05-31T20:25:48+08:00",
  "author":{
    "@type": "Person",
    "name": "DnF"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "http://zone.desiyonan.tech/2021/05/8df2adb7809b41c597eb2efb10ed66db/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "DnF's Zone",
    "logo": {
      "@type": "ImageObject",
      "url": "http://zone.desiyonan.tech/favicon.ico"
    }
  }
}
</script>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>
<noscript>
    <style type="text/css">
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: #1d1e20;
                --entry: #2e2e33;
                --primary: rgba(255, 255, 255, 0.84);
                --secondary: rgba(255, 255, 255, 0.56);
                --tertiary: rgba(255, 255, 255, 0.16);
                --content: rgba(255, 255, 255, 0.74);
                --hljs-bg: #2e2e33;
                --code-bg: #37383e;
                --border: #333;
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="http://zone.desiyonan.tech" accesskey="h" title="DnF&#39;s Zone (Alt + H)">DnF&#39;s Zone</a>
            <span class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
            </span>
        </div>
        <ul id="menu">
            <li>
                <a href="http://zone.desiyonan.tech/search" title="搜索">
                    <span>搜索</span>
                </a>
            </li>
            <li>
                <a href="http://zone.desiyonan.tech/categories" title="分类">
                    <span>分类</span>
                </a>
            </li>
            <li>
                <a href="http://zone.desiyonan.tech/tags" title="标签">
                    <span>标签</span>
                </a>
            </li>
            <li>
                <a href="http://zone.desiyonan.tech/series" title="系列">
                    <span>系列</span>
                </a>
            </li>
            <li>
                <a href="http://zone.desiyonan.tech/archive" title="归档">
                    <span>归档</span>
                </a>
            </li>
            <li>
                <a href="http://zone.desiyonan.tech/about" title="关于">
                    <span>关于</span>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    <div class="breadcrumbs"><a href="http://zone.desiyonan.tech">Home</a>&nbsp;»&nbsp;<a href="http://zone.desiyonan.tech/post/">Posts</a></div>
    <h1 class="post-title">
      Hugo&#43;Github 搭建个人网站
    </h1>
    <div class="post-meta">2021-05-31&nbsp;·&nbsp;DnF
</div>
  </header> <div class="toc">
    <details >
        <summary accesskey="c" title="(Alt + C)">
            <div class="details">Table of Contents</div>
        </summary>
        <div class="inner"><ul>
                <li>
                    <a href="#%e7%ae%80%e4%bb%8b" aria-label="简介">简介</a></li>
                <li>
                    <a href="#%e5%89%8d%e8%a8%80" aria-label="前言">前言</a></li>
                <li>
                    <a href="#%e5%ae%89%e8%a3%85-hugo" aria-label="安装 Hugo">安装 Hugo</a></li>
                <li>
                    <a href="#%e6%96%b0%e5%bb%ba%e7%ab%99%e7%82%b9" aria-label="新建站点">新建站点</a></li>
                <li>
                    <a href="#%e9%85%8d%e7%bd%ae-github-pages" aria-label="配置 Github Pages">配置 Github Pages</a></li>
                <li>
                    <a href="#%e7%9b%b8%e5%85%b3%e9%93%be%e6%8e%a5" aria-label="相关链接">相关链接</a>
                </li>
            </ul>
        </div>
    </details>
</div>

  <div class="post-content"><h2 id="简介">简介<a hidden class="anchor" aria-hidden="true" href="#简介">#</a></h2>
<p>这是我的第一篇博客，这篇文章主要讲述了我搭建个人网站，以及如何自动构建发布静态页面的过程。</p>
<h2 id="前言">前言<a hidden class="anchor" aria-hidden="true" href="#前言">#</a></h2>
<p>最近正好整理记录的笔记，之前写的比较随意，不太好整理，而且之前早就想搭建自己的个人博客网站，正好这次刚好又时间折腾折腾。
搭建静态网站的框架网上比较多，文档和教程大部分也比较全，这次就直接选择口碑比较好也容易的 <code>Hugo</code> 在 <code>Github</code> 下搭建一个。</p>
<h2 id="安装-hugo">安装 Hugo<a hidden class="anchor" aria-hidden="true" href="#安装-hugo">#</a></h2>
<p>在 Win10 下使用命令安装：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">scoop install hugo
</code></pre></div><p>验证安装:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">hugo version
</code></pre></div><p>这里的<a href="https://github.com/lukesampson/scoop" title="GitHub Scoop">Scoop</a>是 Win10 平台下的软件包管理工具之一，非常方便，感兴趣可在 <a href="https://github.com/lukesampson/scoop" title="GitHub Scoop">GitHub</a>或<a href="https://codechina.csdn.net/mirrors/lukesampson/scoop?utm_source=csdn_github_accelerator" title="Scoop CodeChina 加速">CodeChina</a> 上查看。<br>
更多的安装方式和文档可以参看<a href="https://gohugo.io/getting-started/installing/" title="hugo 官方安装教程">Hugo 官方安装教程</a>.</p>
<h2 id="新建站点">新建站点<a hidden class="anchor" aria-hidden="true" href="#新建站点">#</a></h2>
<p>新建站点项目</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">hugo new site tech-blog
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">Congratulations! Your new Hugo site is created <span style="color:#66d9ef">in</span> D:\tech-blog.

Just a few more steps and you<span style="color:#960050;background-color:#1e0010">&#39;</span>re ready to go<span style="color:#960050;background-color:#1e0010">:</span>

1. Download a theme into the same-named folder.
   Choose a theme from https<span style="color:#960050;background-color:#1e0010">:</span>//themes.gohugo.io/ or
   create your own with the <span style="color:#e6db74">&#34;hugo new theme &lt;THEMENAME&gt;&#34;</span> command.
2. Perhaps you want to add some content. You can add single files
   with <span style="color:#e6db74">&#34;hugo new &lt;SECTIONNAME&gt;\&lt;FILENAME&gt;.&lt;FORMAT&gt;&#34;</span>.
3. Start the built-in live server via <span style="color:#e6db74">&#34;hugo server&#34;</span>.

Visit https<span style="color:#960050;background-color:#1e0010">:</span>//gohugo.io/ <span style="color:#66d9ef">for</span> quickstart guide and full documentation.
</code></pre></div><p>配置一款主题</p>
<p>Hugo主题提供了大量模板，这里用的主题是 <a href="https://themes.gohugo.io/hugo-papermod" title="hugo papermod 主题">PaperMod</a>，详细文档(安装、配置)可以在<a href="https://github.com/adityatelange/hugo-PaperMod" title="adityatelange/hugo-PaperMod">Github</a>上查看。</p>
<p>更多的主题可以在 <a href="https://themes.gohugo.io/" title="hugo 主题">Hugo 主题</a> 上查看</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">cd tech-blog
git init
git submodule add https<span style="color:#960050;background-color:#1e0010">:</span>//github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1
git submodule update --init --recursive
</code></pre></div><p>修改配置文件 <code>config.toml</code> 或者 <code>config.yaml</code>，<code>.toml</code>格式配置可参考官方文档，<code>.\config.yaml</code>基本内容如下</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">baseurl</span>: <span style="color:#e6db74">&#34;http://zone.desiyonan.tech&#34;</span>
<span style="color:#f92672">title</span>: <span style="color:#e6db74">&#34;DnF&#39;s Zone&#34;</span>
<span style="color:#f92672">defaultContentLanguage</span>: <span style="color:#ae81ff">zh</span>
<span style="color:#f92672">hasCJKLanguage</span>: <span style="color:#66d9ef">true</span>
<span style="color:#f92672">theme</span>: <span style="color:#ae81ff">PaperMod</span> <span style="color:#75715e"># 主题</span>
<span style="color:#f92672">params</span>:
  <span style="color:#f92672">AuthorName</span>: <span style="color:#e6db74">&#34;DnF&#34;</span>
  <span style="color:#f92672">GitHubUser</span>: <span style="color:#e6db74">&#34;desiyonan&#34;</span>
</code></pre></div><p>启动本地服务器</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">hugo server -D
</code></pre></div><div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">Start building sites <span style="color:#960050;background-color:#1e0010">…</span> 

                   | EN
-------------------+-----
  Pages            | 12
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  1
  Processed images |  0
  Aliases          |  2
  Sitemaps         |  1
  Cleaned          |  0

Built <span style="color:#66d9ef">in</span> 35 ms
Watching <span style="color:#66d9ef">for</span> changes <span style="color:#66d9ef">in</span> D:\tech-blog\{archetypes<span style="color:#960050;background-color:#1e0010">，</span>content<span style="color:#960050;background-color:#1e0010">，</span>data<span style="color:#960050;background-color:#1e0010">，</span>layouts<span style="color:#960050;background-color:#1e0010">，</span>static<span style="color:#960050;background-color:#1e0010">，</span>themes}
Watching <span style="color:#66d9ef">for</span> config changes <span style="color:#66d9ef">in</span> D:\tech-blog\config.yaml
Environment<span style="color:#960050;background-color:#1e0010">:</span> <span style="color:#e6db74">&#34;development&#34;</span>
Serving pages from memory
Running <span style="color:#66d9ef">in</span> Fast Render Mode. <span style="color:#66d9ef">For</span> full rebuilds on change<span style="color:#960050;background-color:#1e0010">:</span> hugo server --disableFastRender
Web Server is available at http<span style="color:#960050;background-color:#1e0010">:</span>//localhost<span style="color:#960050;background-color:#1e0010">:</span>1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
</code></pre></div><p>现在可以直接访问 <code>http://localhost:1313/</code> 查看站点，不过要看文章具体效果可以先新建测试文章</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">hugo new post/test.md
<span style="color:#e6db74">&#39;## Test&#39;</span> | out-file -a -e utf8 .\content\post\test.md
</code></pre></div><p>访问 <code>http://localhost:1313/post/test</code> 就可以看到测试效果</p>
<p>最后基本仓库的初始化</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">git commit -am <span style="color:#e6db74">&#34;init&#34;</span>
git push -u origin master
</code></pre></div><h2 id="配置-github-pages">配置 Github Pages<a hidden class="anchor" aria-hidden="true" href="#配置-github-pages">#</a></h2>
<p>基本框架已经搭建完成，需要能够在公网直接访问网页还需要配置 <code>Github Pages</code>。</p>
<p>看了网上不少的博客，大部分都是在本地编辑 <code>.md</code> 文档，完成后通过 <code>hugo</code> 命令构建输出，最后再把输出的 <code>public</code> 目录推送到 <code>Github</code> 上。</p>
<p>再尝试了一两次后太繁琐了，而且也不是我想要的效果，最后在<a href="https://zhuanlan.zhihu.com/p/109057290" title="折腾Hugo | GitHub Pages | Github Actions自动构建发布免费个人网站">知乎</a>上看到最理想的效果：在本地编辑 <code>.md</code> 文档后推送到直接仓库后就可以通过公网看到效果。详细可以看<a href="https://zhuanlan.zhihu.com/p/109057290" title="折腾Hugo | GitHub Pages | Github Actions自动构建发布免费个人网站">知乎上的文章</a>，说明的很清楚，重复的字也懒得码了，这里简单说明下大致流程和需要注意的地方。</p>
<p>流程的大致原理:</p>
<p><img loading="lazy" src="https://pic3.zhimg.com/80/v2-65181b7d8ec20a45a36561135ea55056_720w.jpg" alt="流程的大致原理"  />
</p>
<p>简单的说就是：</p>
<ol>
<li>建两个仓库: 一个放文档源码，一个放构建后的页面代码</li>
<li>给源码仓库添加 <code>Action</code>，当推送 <code>master</code> 代码时自动构建页面，再推送到页面仓库</li>
</ol>
<p>需要注意：</p>
<ol>
<li>放构建后的静态页面的仓库需要配置 <code>Github Pages</code></li>
<li>两个仓库需要一对 <code>SSH</code> 密钥，源码仓库配置私钥，页面仓库配置公钥</li>
<li><code>Github Action</code>配置需要根据实际情况改动下</li>
</ol>
<p>以下是我的改动后 <code>Action</code> 配置内容</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">name</span>: <span style="color:#ae81ff">Deploy Hugo Site to Github Pages on Master Branch</span>

<span style="color:#f92672">on</span>:
  <span style="color:#f92672">push</span>:
    <span style="color:#f92672">branches</span>:
      - <span style="color:#ae81ff">master</span>

<span style="color:#f92672">jobs</span>:
  <span style="color:#f92672">build-deploy</span>:
    <span style="color:#f92672">runs-on</span>: <span style="color:#ae81ff">ubuntu-18.04</span>
    <span style="color:#f92672">steps</span>:
      - <span style="color:#f92672">uses</span>: <span style="color:#ae81ff">actions/checkout@v1 </span> <span style="color:#75715e"># v2 does not have submodules option now</span>
        <span style="color:#f92672">with</span>:
          <span style="color:#f92672">submodules</span>: <span style="color:#66d9ef">true</span>

      - <span style="color:#f92672">name</span>: <span style="color:#ae81ff">Setup Hugo</span>
        <span style="color:#f92672">uses</span>: <span style="color:#ae81ff">peaceiris/actions-hugo@v2</span>
        <span style="color:#f92672">with</span>:
          <span style="color:#f92672">hugo-version</span>: <span style="color:#e6db74">&#39;0.83.1&#39;</span>
          <span style="color:#f92672">extended</span>: <span style="color:#66d9ef">true</span>

      - <span style="color:#f92672">name</span>: <span style="color:#ae81ff">Build</span>
        <span style="color:#f92672">run</span>: <span style="color:#ae81ff">hugo --minify</span>

      - <span style="color:#f92672">name</span>: <span style="color:#ae81ff">Deploy</span>
        <span style="color:#f92672">uses</span>: <span style="color:#ae81ff">peaceiris/actions-gh-pages@v3</span>
        <span style="color:#f92672">with</span>:
          <span style="color:#f92672">deploy_key</span>: <span style="color:#ae81ff">${{ secrets.ACTIONS_DEPLOY_KEY }}</span> <span style="color:#75715e"># 这里的 ACTIONS_DEPLOY_KEY 则是上面设置 Private Key的变量名</span>
          <span style="color:#f92672">external_repository</span>: <span style="color:#ae81ff">desiyonan/zone</span> <span style="color:#75715e"># Pages 远程仓库</span>
          <span style="color:#f92672">publish_dir</span>: <span style="color:#e6db74">&#34;public&#34;</span>
          <span style="color:#f92672">keep_files</span>: <span style="color:#66d9ef">false</span> <span style="color:#75715e"># remove existing files</span>
          <span style="color:#f92672">publish_branch</span>: <span style="color:#ae81ff">master </span> <span style="color:#75715e"># deploying branch</span>
          <span style="color:#f92672">commit_message</span>: <span style="color:#ae81ff">${{ github.event.head_commit.message }}</span>
</code></pre></div><p>不同的点：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">        <span style="color:#f92672">with</span>:
          <span style="color:#f92672">submodules</span>: <span style="color:#66d9ef">true</span>
</code></pre></div><p>因为之前配置主题时是到了 <code>git submodule</code>，所以这里必要有，不然构建后没有主题。</p>
<p>其次</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml">          <span style="color:#f92672">external_repository</span>: <span style="color:#ae81ff">desiyonan/zone</span> <span style="color:#75715e"># Pages 远程仓库</span>
          <span style="color:#f92672">publish_dir</span>: <span style="color:#e6db74">&#34;public&#34;</span>
</code></pre></div><p><code>external_repository</code> 是放页面仓库，<code>publish_dir</code> 是构建后需要推送的目录，<code>hugo</code> 默认的构建目录就是 <code>public</code>，具体配置看下 <code>config.toml</code> 或者 <code>config.yaml</code> 下有没有</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-yml" data-lang="yml"><span style="color:#f92672">publishdir</span>: <span style="color:#ae81ff">xxxx</span>
</code></pre></div><p>不复杂，摸索个把小时就行了。两个仓库的关联配置到此位置，还需要最后一步配置页面仓库的<code>Github Pages</code></p>
<p>打开对应 <code>Github</code> 仓库页面，找到 <code>Setting</code> 页签，然后可以在侧边栏看到 <code>Pages</code> 设置</p>
<p><img loading="lazy" src="https://raw.desiyonan.tech/img/2021/06/20210602154007.png" alt="Github Pages"  />
</p>
<p>需要配置的主要是 <code>Source</code> 选择分支和目录，自定义域名可以通过 <code>Custom domain</code> 配置，域名配置不是必须，如果配置了还需要新增 <code>static/CNAME</code> 文件，文件内容就是自定义的域名，中途改了几次域名就是没改文件导致访问不了网站。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-ps1" data-lang="ps1">PS&gt;cat static\CNAME
zone.desiyonan.tech
</code></pre></div><p>至此，耗时两天，一个完整的自动化部署个人博客终于搭建完了，网站的美化后面再一步步来。</p>
<h2 id="相关链接">相关链接<a hidden class="anchor" aria-hidden="true" href="#相关链接">#</a></h2>
<ol>
<li><a href="https://gohugo.io" title="hugo 官网">Hugo homepage</a></li>
<li><a href="https://gohugo.io/getting-started/installing/" title="hugo 官方安装教程">Hugo Install</a></li>
<li><a href="https://gohugo.io/documentation/" title="Hugo 官方文档">Hugo Docs</a></li>
<li><a href="https://themes.gohugo.io/" title="hugo 主题">Hugo Themes</a></li>
<li><a href="https://themes.gohugo.io/hugo-papermod" title="hugo papermod 主题">Theme PaperMod</a></li>
<li><a href="https://github.com/adityatelange/hugo-PaperMod" title="adityatelange/hugo-PaperMod">PaperMod - Github</a></li>
<li><a href="https://www.gohugo.org/doc/overview/configuration" title="Hugo 中文网">Hugo Config</a></li>
<li><a href="https://github.com/lukesampson/scoop" title="GitHub Scoop">Scoop Github</a></li>
<li><a href="https://codechina.csdn.net/mirrors/lukesampson/scoop?utm_source=csdn_github_accelerator" title="Scoop CodeChina 加速">Scoop Codechina</a></li>
<li><a href="https://study777.gitee.io/p/hugo-gitee/" title="Hugo Gitee - 黄世豪的Blog">Hugo Gitee - Blog</a></li>
<li><a href="https://www.dazhuanlan.com/2019/12/27/5e05bb1372559/">使用Hugo搭建博客 - Blog</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/109057290" title="折腾Hugo | GitHub Pages | Github Actions自动构建发布免费个人网站">Hugo Deploy Action</a></li>
</ol>
<!-- raw HTML omitted -->
</div>
  <footer class="post-footer">
    <ul class="post-tags">
      <li><a href="http://zone.desiyonan.tech/tags/web/">web</a></li>
      <li><a href="http://zone.desiyonan.tech/tags/blog/">blog</a></li>
      <li><a href="http://zone.desiyonan.tech/tags/hugo/">hugo</a></li>
      <li><a href="http://zone.desiyonan.tech/tags/github/">github</a></li>
      <li><a href="http://zone.desiyonan.tech/tags/markdown/">markdown</a></li>
    </ul>
<div class="share-buttons">
    <a target="_blank" rel="noopener noreferrer" aria-label="share Hugo&#43;Github 搭建个人网站 on twitter"
        href="https://twitter.com/intent/tweet/?text=Hugo%2bGithub%20%e6%90%ad%e5%bb%ba%e4%b8%aa%e4%ba%ba%e7%bd%91%e7%ab%99&amp;url=http%3a%2f%2fzone.desiyonan.tech%2f2021%2f05%2f8df2adb7809b41c597eb2efb10ed66db%2f&amp;hashtags=web%2cblog%2chugo%2cgithub%2cmarkdown">
        <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve">
            <path
                d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-253.927,424.544c135.939,0 210.268,-112.643 210.268,-210.268c0,-3.218 0,-6.437 -0.153,-9.502c14.406,-10.421 26.973,-23.448 36.935,-38.314c-13.18,5.824 -27.433,9.809 -42.452,11.648c15.326,-9.196 26.973,-23.602 32.49,-40.92c-14.252,8.429 -30.038,14.56 -46.896,17.931c-13.487,-14.406 -32.644,-23.295 -53.946,-23.295c-40.767,0 -73.87,33.104 -73.87,73.87c0,5.824 0.613,11.494 1.992,16.858c-61.456,-3.065 -115.862,-32.49 -152.337,-77.241c-6.284,10.881 -9.962,23.601 -9.962,37.088c0,25.594 13.027,48.276 32.95,61.456c-12.107,-0.307 -23.448,-3.678 -33.41,-9.196l0,0.92c0,35.862 25.441,65.594 59.311,72.49c-6.13,1.686 -12.72,2.606 -19.464,2.606c-4.751,0 -9.348,-0.46 -13.946,-1.38c9.349,29.426 36.628,50.728 68.965,51.341c-25.287,19.771 -57.164,31.571 -91.8,31.571c-5.977,0 -11.801,-0.306 -17.625,-1.073c32.337,21.15 71.264,33.41 112.95,33.41Z" />
        </svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Hugo&#43;Github 搭建个人网站 on linkedin"
        href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3a%2f%2fzone.desiyonan.tech%2f2021%2f05%2f8df2adb7809b41c597eb2efb10ed66db%2f&amp;title=Hugo%2bGithub%20%e6%90%ad%e5%bb%ba%e4%b8%aa%e4%ba%ba%e7%bd%91%e7%ab%99&amp;summary=Hugo%2bGithub%20%e6%90%ad%e5%bb%ba%e4%b8%aa%e4%ba%ba%e7%bd%91%e7%ab%99&amp;source=http%3a%2f%2fzone.desiyonan.tech%2f2021%2f05%2f8df2adb7809b41c597eb2efb10ed66db%2f">
        <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve">
            <path
                d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z" />
        </svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Hugo&#43;Github 搭建个人网站 on reddit"
        href="https://reddit.com/submit?url=http%3a%2f%2fzone.desiyonan.tech%2f2021%2f05%2f8df2adb7809b41c597eb2efb10ed66db%2f&title=Hugo%2bGithub%20%e6%90%ad%e5%bb%ba%e4%b8%aa%e4%ba%ba%e7%bd%91%e7%ab%99">
        <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve">
            <path
                d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-3.446,265.638c0,-22.964 -18.616,-41.58 -41.58,-41.58c-11.211,0 -21.361,4.457 -28.841,11.666c-28.424,-20.508 -67.586,-33.757 -111.204,-35.278l18.941,-89.121l61.884,13.157c0.756,15.734 13.642,28.29 29.56,28.29c16.407,0 29.706,-13.299 29.706,-29.701c0,-16.403 -13.299,-29.702 -29.706,-29.702c-11.666,0 -21.657,6.792 -26.515,16.578l-69.105,-14.69c-1.922,-0.418 -3.939,-0.042 -5.585,1.036c-1.658,1.073 -2.811,2.761 -3.224,4.686l-21.152,99.438c-44.258,1.228 -84.046,14.494 -112.837,35.232c-7.468,-7.164 -17.589,-11.591 -28.757,-11.591c-22.965,0 -41.585,18.616 -41.585,41.58c0,16.896 10.095,31.41 24.568,37.918c-0.639,4.135 -0.99,8.328 -0.99,12.576c0,63.977 74.469,115.836 166.33,115.836c91.861,0 166.334,-51.859 166.334,-115.836c0,-4.218 -0.347,-8.387 -0.977,-12.493c14.564,-6.47 24.735,-21.034 24.735,-38.001Zm-119.474,108.193c-20.27,20.241 -59.115,21.816 -70.534,21.816c-11.428,0 -50.277,-1.575 -70.522,-21.82c-3.007,-3.008 -3.007,-7.882 0,-10.889c3.003,-2.999 7.882,-3.003 10.885,0c12.777,12.781 40.11,17.317 59.637,17.317c19.522,0 46.86,-4.536 59.657,-17.321c3.016,-2.999 7.886,-2.995 10.885,0.008c3.008,3.011 3.003,7.882 -0.008,10.889Zm-5.23,-48.781c-16.373,0 -29.701,-13.324 -29.701,-29.698c0,-16.381 13.328,-29.714 29.701,-29.714c16.378,0 29.706,13.333 29.706,29.714c0,16.374 -13.328,29.698 -29.706,29.698Zm-160.386,-29.702c0,-16.381 13.328,-29.71 29.714,-29.71c16.369,0 29.689,13.329 29.689,29.71c0,16.373 -13.32,29.693 -29.689,29.693c-16.386,0 -29.714,-13.32 -29.714,-29.693Z" />
        </svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Hugo&#43;Github 搭建个人网站 on facebook"
        href="https://facebook.com/sharer/sharer.php?u=http%3a%2f%2fzone.desiyonan.tech%2f2021%2f05%2f8df2adb7809b41c597eb2efb10ed66db%2f">
        <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve">
            <path
                d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
        </svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Hugo&#43;Github 搭建个人网站 on whatsapp"
        href="https://api.whatsapp.com/send?text=Hugo%2bGithub%20%e6%90%ad%e5%bb%ba%e4%b8%aa%e4%ba%ba%e7%bd%91%e7%ab%99%20-%20http%3a%2f%2fzone.desiyonan.tech%2f2021%2f05%2f8df2adb7809b41c597eb2efb10ed66db%2f">
        <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve">
            <path
                d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-58.673,127.703c-33.842,-33.881 -78.847,-52.548 -126.798,-52.568c-98.799,0 -179.21,80.405 -179.249,179.234c-0.013,31.593 8.241,62.428 23.927,89.612l-25.429,92.884l95.021,-24.925c26.181,14.28 55.659,21.807 85.658,21.816l0.074,0c98.789,0 179.206,-80.413 179.247,-179.243c0.018,-47.895 -18.61,-92.93 -52.451,-126.81Zm-126.797,275.782l-0.06,0c-26.734,-0.01 -52.954,-7.193 -75.828,-20.767l-5.441,-3.229l-56.386,14.792l15.05,-54.977l-3.542,-5.637c-14.913,-23.72 -22.791,-51.136 -22.779,-79.287c0.033,-82.142 66.867,-148.971 149.046,-148.971c39.793,0.014 77.199,15.531 105.329,43.692c28.128,28.16 43.609,65.592 43.594,105.4c-0.034,82.149 -66.866,148.983 -148.983,148.984Zm81.721,-111.581c-4.479,-2.242 -26.499,-13.075 -30.604,-14.571c-4.105,-1.495 -7.091,-2.241 -10.077,2.241c-2.986,4.483 -11.569,14.572 -14.182,17.562c-2.612,2.988 -5.225,3.364 -9.703,1.12c-4.479,-2.241 -18.91,-6.97 -36.017,-22.23c-13.314,-11.876 -22.304,-26.542 -24.916,-31.026c-2.612,-4.484 -0.279,-6.908 1.963,-9.14c2.016,-2.007 4.48,-5.232 6.719,-7.847c2.24,-2.615 2.986,-4.484 4.479,-7.472c1.493,-2.99 0.747,-5.604 -0.374,-7.846c-1.119,-2.241 -10.077,-24.288 -13.809,-33.256c-3.635,-8.733 -7.327,-7.55 -10.077,-7.688c-2.609,-0.13 -5.598,-0.158 -8.583,-0.158c-2.986,0 -7.839,1.121 -11.944,5.604c-4.105,4.484 -15.675,15.32 -15.675,37.364c0,22.046 16.048,43.342 18.287,46.332c2.24,2.99 31.582,48.227 76.511,67.627c10.685,4.615 19.028,7.371 25.533,9.434c10.728,3.41 20.492,2.929 28.209,1.775c8.605,-1.285 26.499,-10.833 30.231,-21.295c3.732,-10.464 3.732,-19.431 2.612,-21.298c-1.119,-1.869 -4.105,-2.99 -8.583,-5.232Z" />
        </svg>
    </a>
    <a target="_blank" rel="noopener noreferrer" aria-label="share Hugo&#43;Github 搭建个人网站 on telegram"
        href="https://telegram.me/share/url?text=Hugo%2bGithub%20%e6%90%ad%e5%bb%ba%e4%b8%aa%e4%ba%ba%e7%bd%91%e7%ab%99&amp;url=http%3a%2f%2fzone.desiyonan.tech%2f2021%2f05%2f8df2adb7809b41c597eb2efb10ed66db%2f">
        <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28">
            <path
                d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
        </svg>
    </a>
</div>

  </footer>
</article>
    </main>
    <footer class="footer">
    <span>&copy; 2021 <a href="http://zone.desiyonan.tech">DnF&#39;s Zone</a></span>
    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)">
    <button class="top-link" id="top-link" type="button" accesskey="g">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
            <path d="M12 6H0l6-6z" />
        </svg>
    </button>
</a>

<script>
    let menu = document.getElementById('menu')
    menu.scrollLeft = localStorage.getItem("menu-scroll-position");
    menu.onscroll = function () {
        localStorage.setItem("menu-scroll-position", menu.scrollLeft);
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerText = 'copy';

        function copyingDone() {
            copybutton.innerText = 'copied!';
            setTimeout(() => {
                copybutton.innerText = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>
</body>

</html>
